/**
 * [积分兑换记录]
 * @Author: Fu Xiaochun
 * @Email:  fuzhengchun@ling1.org
 */
<template>
<div>
    <el-row class="tableBtnTop">
        <el-select v-model="type" placeholder="请选择" class="filter">
            <el-option label="用户昵称" value="user_name"></el-option>
            <el-option label="用户手机" value="user_tel"></el-option>
            <el-option label="用户ID" value="user_id"></el-option>
        </el-select>
        <div class="search">
            <el-input placeholder="请输入内容" @keyup.enter.native="onSearch" v-model.trim="keyword">
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
        </div>
    </el-row>
    <el-table :data="tableData" border style="margin-top:20px;" v-loading="loading">
        <el-table-column prop="id" label="ID" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="user_info" label="昵称" :show-overflow-tooltip="true">
            <template slot-scope="scope">
                <div class="userHead" @click="goUserDetail(scope.row.user_info.user_id)">
                    <img :src="scope.row.user_info.avatar" class="square" />
                    {{scope.row.user_info.user_name}}
                </div>
            </template>
        </el-table-column>
        <el-table-column prop="shopName" label="商品名称" :show-overflow-tooltip="true">
            <template slot-scope="scope">
                {{scope.row.pro_info.product_name}}
            </template>
        </el-table-column>
        <el-table-column prop="time_created" label="兑换时间" :show-overflow-tooltip="true">
            <template slot-scope="scope">
                {{scope.row.time_created | dateFormat}}
            </template>
        </el-table-column>
        <el-table-column prop="count" label="使用积分" :show-overflow-tooltip="true">
            <template slot-scope="scope">
                {{scope.row.pro_info.price}}
            </template>
        </el-table-column>
            <el-table-column prop="status" label="状态" :show-overflow-tooltip="true">
            <template slot-scope="scope">
                <font v-if="scope.row.status==0" class="red">兑换失败</font>
                <font v-if="scope.row.status==1" class="gray">等待处理</font>
                <font v-if="scope.row.status==2" class="green">已发货</font>
                <font v-if="scope.row.status==3" class="red">拒绝发货</font>
            </template>
        </el-table-column>
        <el-table-column prop="btn" label="操作" :show-overflow-tooltip="true">
            <template slot-scope="scope">
                <!-- <router-link v-if="scope.row.status==0" to="/increment/integralDeliver/" class="blue">发货</router-link> -->
                <router-link class="gray" :to="`/increment/integralDeliver/${scope.row.id}`">查看</router-link>
            </template>
        </el-table-column>
    </el-table>
    <div class="paginationBlock">
        <el-pagination @current-change="changePage" layout="prev, pager, next, total" :total="count" :current-page="page" :page-size="pageSize" hide-on-single-page></el-pagination>
    </div>
</div>
</template>

<script>
import fetch from '@/api/axios';
import {sysToYuan} from '@/utils/transPrice';
import {tsToDateFormat} from '@/utils/tsToDateFormat';
export default {
	data() {
		return {
            loading: false,
			page: 1,
			pageSize: 10,
			count: 0,
			type: 'user_name',
			keyword: '',
			tableData:[],
		};
	},
	filters: {
		transPrice(p){
			return sysToYuan(p, 2);
		},
		dateFormat(t){
			return tsToDateFormat(t, 'yyyy-MM-dd hh:mm');
		},
	},
	created(){
		this.page = parseInt(this.$route.query.page || 1);
		if(this.$route.query.type){
			this.type = this.$route.query.type;
		}
		this.keyword = this.$route.query.keyword;
		this.getList();
	},
	methods: {
		onSearch(){
			let page = 1;
			let type = this.type;
			let keyword = this.keyword;
			let searchStr = '';
			if(type && keyword){
				searchStr = `&${type}=${keyword}`;
			}
			this.page = 1;
			this.getList();
			this.$router.push(`/increment/integral?page=${page}${searchStr}`);

		},
		getList(){
			let _this = this;
			let type = this.keyword ? this.type : undefined;
			this.loading = true;
			fetch.get('/api/console/user/score/exchange/log',{
                page: _this.page,
                pagesize: _this.pageSize,
				type: type,
				keyword: _this.keyword
			}).then((res)=>{
				let data = res.data;
				if(data.code == 0){
					_this.count = data.data.count;
					_this.pageSize = data.data.pagesize;
					_this.tableData = [...data.data.result];
				}else{
					_this.$message.error(data.message);
				}
			}).catch((err)=>{
				_this.$message.error(err.message);
			}).finally(()=>{
				_this.loading = false;
			});
		},
		changePage(page){
			let type = this.type;
			let keyword = this.keyword;
			let typeStr = !type || !keyword ? '' : `&${type}=${keyword}`;
			this.page = page;
			this.$router.replace(`/increment/integral?page=${page}${typeStr}`);
			this.getList();
		},
		goUserDetail(uid){
			this.$router.push('/user/detail/'+uid);
		}
	},
	mounted() {

	},
};
</script>
<style lang="scss" scoped>
.title {
  margin-bottom: 25px;
  font-size: 21px;
  margin-top: 65px;
}
.tableBtnTop{
	margin-top:20px;
}
</style>